<template>
  <div class="create-page">
    <div class="create-form">
      <el-form
        ref="myForm"
        :model="myForm"
        :rules="formRules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="14">
            <div class="line-title">
              <div class="line"></div>
              <div class="title">{{ acTypeInfo.activityTypeName }}</div>
            </div>
            <div class="tip">{{ acTypeInfo.activityIllustrate }}</div>
            <div class="form-item flex">
              <el-form-item prop="activityName" label="活动名称:">
                <el-input
                  :disabled="isReadonly"
                  placeholder="请输入活动名称"
                  class="form-item-width"
                  size="medium"
                  v-model="myForm.activityName"
                  maxlength="20"
                ></el-input>
              </el-form-item>
              <el-form-item label="活动类型:">
                <el-select
                  :disabled="true"
                  v-model="myForm.marketId"
                  clearable
                  placeholder="请选择活动类型"
                >
                  <el-option
                    v-for="item in [
                      { label: '平台活动', value: 1 },
                      { label: '商户活动', value: 2 },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="activity-img">
              <el-form-item prop="activityImg" label="宣传图片:">
                <DirectImgUpload
                  :disabled="isReadonly"
                  :modelValue.sync="myForm.activityImg"
                  :limit="1"
                  :prompt="false"
                  width="750px"
                  height="600px"
                  cropW="750"
                  cropH="600"
                  @input="imgsChange"
                />
                <span>支持jpg/png文件</span>
              </el-form-item>
            </div>

            <div class="form-item-row">
              <el-form-item
                prop="activityRelationshipState"
                label-width="140px"
                label="与其他活动关系:"
              >
                <el-radio
                  @input="checkMyFormValue('activityRelationshipState')"
                  :disabled="isReadonly"
                  v-model="myForm.activityRelationshipState"
                  :label="2"
                  >可叠加享受</el-radio
                >
                <el-radio
                  @input="checkMyFormValue('activityRelationshipState')"
                  :disabled="isReadonly"
                  v-model="myForm.activityRelationshipState"
                  :label="1"
                  >与其他活动互斥，不能同时享受</el-radio
                >
              </el-form-item>
            </div>
            <div class="form-item-row">
              <el-form-item prop="activityUseState" label="使用对象:">
                <el-radio
                  @input="checkMyFormValue('activityUseState')"
                  v-model="myForm.activityUseState"
                  :disabled="isReadonly"
                  :label="1"
                  >旅客</el-radio
                >
                <el-radio
                  @input="checkMyFormValue('activityUseState')"
                  v-model="myForm.activityUseState"
                  :disabled="isReadonly"
                  :label="2"
                  >员工</el-radio
                >
              </el-form-item>
            </div>
            <div class="form-item-row">
              <el-form-item prop="activityMsg" label="备注:">
                <el-input
                  :disabled="isReadonly"
                  class="form-item-width-max"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入内容"
                  v-model="myForm.activityMsg"
                  maxlength="30"
                  show-word-limit
                >
                </el-input>
              </el-form-item>
            </div>

            <div class="line-title">
              <div class="line"></div>
              <div class="title">适用范围</div>
            </div>

            <div class="form-item">
              <el-form-item prop="applicableArea" label="适用区域:">
                <el-cascader
                  :disabled="isReadonly"
                  size="medium"
                  class="form-item-width-max"
                  :clearable="true"
                  collapse-tags
                  :ref="`CascaderApplicableArea`"
                  :options="shopLocationOptions"
                  v-model="myForm.applicableArea"
                  :props="shopLocationProps"
                  @change="handleShopLocationChange"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item prop="applicableShop" label="适用商户:">
                <el-cascader
                  :disabled="isReadonly"
                  placeholder=" 请选择"
                  size="medium"
                  filterable
                  class="form-item-width-max"
                  :clearable="true"
                  :collapse-tags="!isReadonly"
                  :ref="`ShopTree`"
                  :options="shopTreeOptions"
                  v-model="myForm.applicableShop"
                  :props="shopTreeProps"
                  @change="handleShopTreeChange"
                >
                </el-cascader>
              </el-form-item>
              <div class="form-item-row">
                <el-form-item label="配送方式:">
                  <el-radio-group
                    v-model="myForm.activityShopDeliveryStatus"
                    :key="radioKey"
                  >
                    <el-radio
                      @click.native.prevent="checkDvyType(1)"
                      :disabled="isReadonly"
                      :label="1"
                      >国内快递</el-radio
                    >
                    <el-radio
                      @click.native.prevent="checkDvyType(2)"
                      :disabled="isReadonly"
                      :label="2"
                      >到店自提</el-radio
                    >
                    <el-radio
                      @click.native.prevent="checkDvyType(4)"
                      :disabled="isReadonly"
                      :label="4"
                      >楼内闪送</el-radio
                    >
                  </el-radio-group>
                </el-form-item>
              </div>
            </div>

            <div class="line-title">
              <div class="line"></div>
              <div class="title">活动时间</div>
            </div>

            <div class="time-radio">
              <el-form-item prop="activityTimeState" label-width="0">
                <el-radio-group
                  :disabled="isReadonly"
                  v-model="myForm.activityTimeState"
                  @change="changeActivityTimeState"
                >
                  <el-radio :label="2">按时间</el-radio>
                  <el-radio :label="1">按周期</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div v-if="myForm.activityTimeState == '1'">
              <div class="period-panel">
                <el-form-item prop="activityTimeCycleState">
                  <el-radio-group
                    :disabled="isReadonly"
                    @change="changeActivityTimeCycleState"
                    v-model="myForm.activityTimeCycleState"
                  >
                    <div class="period-line">
                      <el-radio :label="0">每天</el-radio>
                      <el-time-picker
                        size="medium"
                        :disabled="
                          myForm.activityTimeCycleState != '0' || isReadonly
                        "
                        is-range
                        v-model="timePickerValueByDay"
                        value-format="HH:mm:ss"
                        @change="changeTimePickerByDay"
                        range-separator="——"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围"
                      >
                      </el-time-picker>
                    </div>
                    <div class="period-line">
                      <el-radio :label="1">每周</el-radio>
                      <div class="week-list">
                        <el-checkbox-group
                          :disabled="
                            myForm.activityTimeCycleState != '1' || isReadonly
                          "
                          size="medium"
                          v-model="checkboxGroups"
                          @change="changeCheckboxGroups"
                        >
                          <el-checkbox-button
                            v-for="week in useWeeks"
                            :label="week.value"
                            :key="week.value"
                            >{{ week.label }}</el-checkbox-button
                          >
                        </el-checkbox-group>
                        <el-time-picker
                          class="time-picker-3 time-picker-3-week"
                          value-format="HH:mm:ss"
                          :disabled="
                            myForm.activityTimeCycleState != '1' || isReadonly
                          "
                          size="medium"
                          is-range
                          v-model="timePickerValueByWeek"
                          @change="changeTimePickerByWeek"
                          range-separator="——"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          placeholder="选择时间范围"
                        >
                        </el-time-picker>
                      </div>
                    </div>
                    <div class="period-line">
                      <el-radio :label="2">每月</el-radio>
                      <div>
                        <el-select
                          :disabled="isReadonly"
                          size="medium"
                          v-if="myForm.activityTimeCycleState == '2'"
                          v-model="myForm.activityTimeNum"
                          clearable
                          placeholder="请选择日期"
                          class="form-item-width-70"
                        >
                          <el-option
                            v-for="item in useDays"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>

                        <el-select
                          disabled
                          size="medium"
                          style="width: 350px; margin-bottom: 10px"
                          v-if="myForm.activityTimeCycleState != '2'"
                          v-model="myForm._activityTimeNum"
                          clearable
                          placeholder="请选择一个日期"
                        >
                          <el-option
                            v-for="item in useDays"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>

                        <el-time-picker
                          :disabled="
                            myForm.activityTimeCycleState != '2' || isReadonly
                          "
                          class="time-picker-3"
                          value-format="HH:mm:ss"
                          size="medium"
                          is-range
                          v-model="timePickerValueByMonth"
                          @change="changeTimePickerByMonth"
                          range-separator="——"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          placeholder="选择时间范围"
                        >
                        </el-time-picker>
                      </div>
                    </div>
                  </el-radio-group>
                </el-form-item>
              </div>
            </div>
            <div
              class="period-panel-time"
              v-if="myForm.activityTimeState == '2'"
            >
              <el-form-item prop="activityStartTime" label-width="0">
                <el-date-picker
                  :disabled="isReadonly"
                  size="small"
                  v-model="timer"
                  type="datetimerange"
                  :range-separator="$t('date.tip')"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :start-placeholder="$t('text.startTime')"
                  :end-placeholder="$t('date.end')"
                  :default-time="['00:00:00', '23:59:59']"
                  @change="createTimeChange"
                ></el-date-picker>
              </el-form-item>
            </div>
            <component
              v-if="acTypeInfo.id"
              :is="'AcType' + acTypeInfo.id"
              :acTypeInfo="acTypeInfo"
              :dvyType="myForm.activityShopDeliveryStatus"
              :action="action"
              ref="AcTypeComponent"
              :categoryProdListTree="categoryProdListTree"
              :selectShopList="selectShopList"
              @closeLoading="closeLoading"
              :disabled="isReadonly"
            ></component>
          </el-col>
          <!-- <el-col :span="10">
            <div class="form-item-row">
              <el-form-item
                prop="activityRelationshipState"
                label-width="140px"
                label="与其他活动关系:"
              >
                <el-radio
                  @input="checkMyFormValue('activityRelationshipState')"
                  :disabled="isReadonly"
                  v-model="myForm.activityRelationshipState"
                  :label="2"
                  >可叠加享受</el-radio
                >
                <el-radio
                  @input="checkMyFormValue('activityRelationshipState')"
                  :disabled="isReadonly"
                  v-model="myForm.activityRelationshipState"
                  :label="1"
                  >与其他活动互斥，不能同时享受</el-radio
                >
              </el-form-item>
            </div>
            <div class="form-item-row">
              <el-form-item
                label-width="120px"
                prop="activityUseState"
                label="使用对象:"
              >
                <el-radio
                  @input="checkMyFormValue('activityUseState')"
                  v-model="myForm.activityUseState"
                  :disabled="isReadonly"
                  :label="1"
                  >旅客</el-radio
                >
                <el-radio
                  @input="checkMyFormValue('activityUseState')"
                  v-model="myForm.activityUseState"
                  :disabled="isReadonly"
                  :label="2"
                  >员工</el-radio
                >
              </el-form-item>
            </div>
            <div class="form-item-row">
              <el-form-item
                label-width="120px"
                prop="activityMsg"
                label="备注:"
              >
                <el-input
                  :disabled="isReadonly"
                  class="form-item-width-max"
                  type="textarea"
                  :rows="4"
                  style="width: 100%"
                  placeholder="请输入内容"
                  v-model="myForm.activityMsg"
                  maxlength="30"
                  show-word-limit
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col> -->
        </el-row>
      </el-form>
    </div>
    <div class="footer">
      <div class="footer-box">
        <el-button
          class="button"
          type="succenss"
          size="small"
          @click="$router.back()"
          >返回</el-button
        >
        <el-button
          class="button"
          v-if="!isReadonly"
          type="primary"
          size="small"
          @click="submit"
          >确认</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { _types, _weeks, _days } from "./promotionMethodComps/definition";
import { Debounce } from "@/utils/debounce";
var loading;
import {
  AcType1,
  AcType2,
  AcType3,
  AcType4,
  AcType5,
  AcType6,
  AcType7,
  AcType8,
  AcType9,
  AcType10,
  AcType11,
  AcType12,
} from "./promotionMethodComps";
export default {
  components: {
    AcType1,
    AcType2,
    AcType3,
    AcType4,
    AcType5,
    AcType6,
    AcType7,
    AcType8,
    AcType9,
    AcType10,
    AcType11,
    AcType12,
  },
  data() {
    return {
      acTypeInfo: {},
      id: "",
      action: "add",
      useTypes: _types,
      useWeeks: _weeks,
      useDays: _days,
      timer: [],
      timePickerValueByDay: null,
      timePickerValueByWeek: null,
      timePickerValueByMonth: null,
      myForm: {
        marketId: 1,
        activityTimeState: 2,
        applicableArea: [],
        activityStartTime: "",
        activityShopDeliveryStatus: 0,
      },
      radioKey: false,
      selectShopList: [],
      checkboxGroups: [],
      formRules: {
        activityName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        marketId: [
          { required: true, message: "请选择活动类型", trigger: "change" },
        ],
        activityImg: [
          {
            required: true,
            message: "请上传活动图片",
            trigger: "change",
          },
        ],
        applicableArea: [
          { required: true, message: "请选择适用区域", trigger: "change" },
        ],
        applicableShop: [
          { required: true, message: "请选择适用门店", trigger: "change" },
        ],
        activityTimeState: [
          {
            required: true,
            message: "请选择活动时间",
            trigger: ["change", "blur"],
          },
        ],
        activityStartTime: [
          {
            required: true,
            message: "请选择活动时间",
            trigger: ["change", "blur"],
          },
        ],
        activityTimeCycleState: [
          {
            required: true,
            message: "请选择活动周期",
            trigger: ["change", "blur"],
          },
        ],
        activityRelationshipState: [
          {
            required: true,
            message: "请选择与其他活动关系",
            trigger: ["change", "blur"],
          },
        ],
        activityUseState: [
          {
            required: true,
            message: "请选择使用对象",
            trigger: ["change", "blur"],
          },
        ],
      },
      shopLocationOptions: [],
      shopLocationProps: {
        label: "name",
        value: "id",
        multiple: true,
      },
      shopTreeProps: {
        label: "name",
        value: "id",
        children: "childList",
        multiple: true,
      },
      shopTreeOptions: [],

      categoryProductTree: [],
      categoryProductProps: {
        label: "name",
        value: "id",
        // children:"productList",
        multiple: true,
      },
      categoryProdListTree: [],
    };
  },
  computed: {
    // 新增
    isAdd() {
      return this.action === "add";
    },
    // 编辑
    isEdit() {
      return this.action === "edit";
    },
    // 查看
    isReadonly() {
      return this.action === "readonly";
    },
  },
  created() {
    // 区域树
    this.queryShopLocation();
    let { acTypeInfo, id, action } = this.$route.query;
    if (acTypeInfo) {
      this.acTypeInfo = JSON.parse(acTypeInfo);
      this.myForm.activityMarketTypeId = this.acTypeInfo.id;
      this.myForm.activityMarketTypeName = this.acTypeInfo.activityTypeName;
    }
    if (action) {
      let actionMapTitle = {
        add: "新增",
        edit: "编辑",
        readonly: "查看",
      };
      this.$store.commit("common/replaceSelectMenu", actionMapTitle[action]);
    }
    if (id) {
      this.id = id;
      this.action = action;
    }
  },
  mounted() {
    if (this.id) {
      this.getActiveInfo();
      loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    }
  },
  methods: {
    closeLoading() {
      setTimeout(() => {
        loading.close();
      }, 500);
    },
    getActiveInfo() {
      this.$http({
        url: this.$http.adornUrl(`/platform/activity/${this.id}`),
        method: "get",
      }).then(async ({ data }) => {
        let acTypeInfo = _types.find(
          (m) => m.id == data.activity.activityMarketTypeId
        );
        this.acTypeInfo = acTypeInfo;
        if (data.activity.activityTimeState == 2) {
          // 如果选择的是时间 ，需拼接日期
          this.timer = [
            `${data.activity.activityStartTime}`,
            `${data.activity.activityEndTime}`,
          ];
        } else {
          // 如果选择的是周期
          let t = [
            data.activity.activityCycleStartTime,
            data.activity.activityCycleEndTime,
          ];
          if (data.activity.activityTimeCycleState == 0) {
            // 天
            this.timePickerValueByDay = t;
          } else if (data.activity.activityTimeCycleState == 1) {
            // 周
            this.timePickerValueByWeek = t;
            this.checkboxGroups = data.activity.activityWeeks =
              data.activity.weekDays.split(",");
          } else if (data.activity.activityTimeCycleState == 2) {
            // 月
            this.timePickerValueByMonth = t;
            // activityTimeNum
          }
        }
        // 适用区域
        if (data.activity.applicableArea) {
          data.activity.applicableArea = JSON.parse(
            data.activity.applicableArea
          );
          data.activity.applicableArea = data.activity.applicableArea.map(
            (m) => m.airportShopAddressIds
          );
          this.myForm.applicableArea = data.activity.applicableArea;
          this.$nextTick(() => {
            this.$refs.myForm.validateField("applicableArea");
          });
          if (data.activity.activityBusinessState == 1) {
            await this.getConformShopList();
          } else {
            this.searchProdsByCurrentShop(
              data.activityMerchantList[0].merchantId,
              data.activity.activityShopDeliveryStatus
            );
          }
        }
        // 适用商户
        if (data.activity.applicableShop) {
          data.activity.applicableShop = JSON.parse(
            data.activity.applicableShop
          );
          data.activity.applicableShop = data.activity.applicableShop.map(
            (m) => m.shopIds
          );
        }
        this.myForm = data.activity;
        this.$nextTick(() => {
          this.$refs.myForm.validateField("activityStartTime");
        });
        // 赋予子组件的值   平台活动业务
        if (data.activity.activityBusinessState == 1) {
          this.$nextTick(() => {
            this.handleShopTreeChange(() => {
              this.$nextTick(() => {
                this.$refs.AcTypeComponent.collatingEchoData(data);
              });
            });
          });
        } else {
          this.$nextTick(() => {
            this.$refs.AcTypeComponent.collatingEchoData(data);
          });
        }
      }).catch((error) => {
        this.closeLoading();
      })
    },
    // 根据商户查询商品
    searchProdsByCurrentShop(shopId, dvyType = 0) {
      this.$http({
        url: this.$http.adornUrl("/prod/prod/gatCategoryProduct"),
        method: "get",
        params: this.$http.adornParams({ shopId, dvyType }),
      }).then(({ data }) => {
        if (data) {
          this.categoryProductTree = data;
          this.handleCategoryChange();
        }
      });
    },
    imgsChange(e) {
      // 上传图片的回调
      console.log("e", e);
      this.$refs.myForm.validateField("activityImg");
    },
    checkMyFormValue(key) {
      this.$refs.myForm.validateField(key);
    },
    checkDvyType(val) {
      this.myForm.activityShopDeliveryStatus =
        this.myForm.activityShopDeliveryStatus == val ? 0 : val;
      this.radioKey = !this.radioKey;
    },
    // 获取区域
    queryShopLocation() {
      this.$http({
        url: this.$http.adornUrl("/admin/platform/airportStation/list"),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        this.shopLocationOptions = data;
        this.handleCategoryChange();
      });
    },
    handleCategoryChange() {
      // console.log("applicableArea", this.myForm._applicableArea);
      this.$nextTick(() => {
        let nodes = this.$refs.CascaderApplicableArea.getCheckedNodes(true);
        console.log(nodes, nodes.length, this.categoryProductTree);
        this.categoryProdListTree = nodes.map((m) => m.data);
      });
    },
    handleShopLocationChange() {
      this.$nextTick(async () => {
        // console.log("applicableArea", this.myForm._applicableArea);
        let nodes = this.$refs.CascaderApplicableArea.getCheckedNodes(true);
        console.log(nodes, nodes.length);
        if (nodes.length) {
          await this.getConformShopList();
          this.handleShopTreeChange();
        } else {
          this.shopTreeOptions = [];
          this.selectShopList = [];
          this.$set(this.myForm, "applicableShop", []);
        }
      });
    },
    handleShopTreeChange(callback) {
      this.$nextTick(() => {
        let nodes = this.$refs.ShopTree.getCheckedNodes(true);
        console.log(nodes);
        this.selectShopList = nodes;
        if (callback && typeof callback === "function") {
          callback();
        }
      });
    },
    // 适用商户
    getConformShopList() {
      return new Promise((resolve, reject) => {
        if (
          this.myForm.applicableArea &&
          this.myForm.applicableArea.length > 0
        ) {
          let addressId = this.myForm.applicableArea.map((m) => {
            return m[m.length - 1];
          });
          this.$http({
            url: this.$http.adornUrl(
              "/platform/shopDetail/getAddressIdShopList"
            ),
            method: "post",
            data: addressId,
          })
            .then(({ data }) => {
              this.shopTreeOptions = data;
              resolve();
            })
            .catch(reject);
        }
      });
    },
    changeTimePickerByDay(e) {
      console.log(this.timePickerValueByDay);
      this.setSearchFormStartOrEnd(this.timePickerValueByDay);
    },
    changeTimePickerByWeek(e) {
      console.log(this.timePickerValueByWeek);
      this.setSearchFormStartOrEnd(this.timePickerValueByWeek);
    },
    changeTimePickerByMonth(e) {
      console.log(this.timePickerValueByMonth);
      this.setSearchFormStartOrEnd(this.timePickerValueByMonth);
    },
    setSearchFormStartOrEnd(e) {
      this.myForm.activityCycleStartTime = e[0];
      this.myForm.activityCycleEndTime = e[1];
    },

    // 切换周期 日期
    changeActivityTimeState() {
      this.timePickerValueByDay = null;
      this.timePickerValueByWeek = null;
      this.timePickerValueByMonth = null;
      this.myForm.activityStartTime = "";
      this.myForm.activityEndTime = "";
    },

    // 周期内切换 天 周 月
    changeActivityTimeCycleState() {
      console.log(this.myForm.activityTimeCycleState);
      if (this.myForm.activityTimeCycleState == "0") {
        this.timePickerValueByWeek = null;
        this.timePickerValueByMonth = null;
      } else if (this.myForm.activityTimeCycleState == "1") {
        this.timePickerValueByDay = null;
        this.timePickerValueByMonth = null;
      } else if (this.myForm.activityTimeCycleState == "2") {
        this.timePickerValueByDay = null;
        this.timePickerValueByWeek = null;
      }
      this.checkboxGroups = [];
      delete this.myForm.activityTimeNum;
      this.myForm.activityStartTime = "";
      this.myForm.activityEndTime = "";
      this.myForm.activityCycleStartTime = "";
      this.myForm.activityCycleEndTime = "";
    },
    // 选择多选一周
    changeCheckboxGroups() {
      this.myForm.activityWeeks = this.checkboxGroups;
    },

    createTimeChange() {
      if (!this.timer || this.timer.length === 0) {
        this.clearTimeKeys();
      } else {
        this.myForm.activityStartTime = this.timer[0];
        this.myForm.activityEndTime = this.timer[1];
        this.myForm.activityCycleStartTime = "";
        this.myForm.activityCycleEndTime = "";
      }
      console.log("this.myForm", this.myForm);
    },
    submit() {
      console.log("this.myForm", this.myForm);
      if (
        this.myForm.activityName.trim() == "" ||
        this.myForm.activityName == undefined
      ) {
        this.$message.warning("活动名称不能为空");
        return;
      }
      if (this.myForm.activityTimeState == 1) {
        let flag =
          this.myForm.activityCycleStartTime &&
          this.myForm.activityCycleEndTime;
        if (!flag) {
          this.$message.warning("请选择活动开始结束时间");
          return;
        }
        if (this.myForm.activityTimeCycleState == 1) {
          if (
            !this.myForm.activityWeeks ||
            this.myForm.activityWeeks.length == 0
          ) {
            this.$message.warning("请选择活动每周几天和开始结束时间");
            return;
          }
        } else if (this.myForm.activityTimeCycleState == 2) {
          if (!this.myForm.activityTimeNum) {
            this.$message.warning("请选择活动每月几号和开始结束时间");
            return;
          }
        }
      }
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          this.$refs.AcTypeComponent.validAcTypeForm().then((result) => {
            if (result.valid) {
              // 内外层校验通过
              console.log("this.myForm", this.myForm, result.data);
              let resData = {
                activity: {
                  ...this.myForm,
                  applicableArea: JSON.stringify(
                    this.myForm.applicableArea.map((m) => ({
                      airportShopAddressIds: m,
                    }))
                  ),
                  applicableShop: JSON.stringify(
                    this.myForm.applicableShop.map((m) => ({
                      shopIds: m,
                    }))
                  ),
                  activityBusinessState: 1, //平台端是1
                },
                ...result.data,
              };
              console.log("resData:>>>>", resData);
              this.executeSaveApi(resData);
            }
          });
        } else {
          this.$message.warning("请完善必填项");
        }
      });
    },
    executeSaveApi: Debounce(function (resData) {
      const _this = this;
      this.$http({
        url: this.$http.adornUrl(
          this.isEdit
            ? `/platform/activity/updateBachBy`
            : `/platform/activity/create`
        ),
        method: "post",
        data: this.$http.adornParams(resData),
      }).then(({ data }) => {
        console.log("data", data);
        this.$message({
          message: ` ${this.isEdit ? "修改" : "新增"}成功`,
          type: "success",
          duration: 1000,
          onClose() {
            _this.$router.go(_this.isEdit ? -1 : -2);
          },
        });
      });
    }, 1200),
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}

.create-form {
  padding-bottom: 100px;
}

.line-title {
  display: flex;
  align-items: center;

  .line {
    width: 4px;
    height: 14px;
    background: #1890ff;
    border-radius: 1px;
  }

  .title {
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    font-style: normal;
    margin-left: 10px;
  }
}

.tip {
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  margin-left: 16px;
  margin-top: 18px;
}

.form-item {
  margin-top: 15px;
}

.preferential-value {
  display: flex;
  align-items: center;
  height: 40px;
}

.form-item-width {
  width: 240px;

  ::v-deep .el-input-group__append {
    background-color: white;
    padding: 0 10px;
  }
}

.form-item-width-max {
  width: 50%;
}
.form-item-width-70 {
  width: 70%;
  margin-bottom: 10px;
}

.propaganda-picture {
  .upload-size {
    .el-upload__text {
      line-height: 1.8;
    }
  }
}

.time-radio {
  margin-top: 14px;
}

.period-panel {
  margin-top: -10px;
  width: 705px;
  background: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  padding: 6px 10px;
  margin-bottom: 20px;

  .period-line {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    min-height: 40px;
    box-sizing: border-box;
    padding: 4px 0;

    &:last-child {
      border: none;
    }

    .time-picker-2 {
      margin-top: 4px;
    }
  }
}

.period-panel-time {
  margin-top: -10px;
  margin-bottom: 20px;
}

.add-combination {
  margin-left: 30px;
  margin-top: 20px;
}

.footer {
  z-index: 8;
  position: fixed;
  width: calc(100% - 250px);
  bottom: 0;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  box-shadow: 4px 2px 5px 5px #eee;
  background: #fff;
  margin-left: -20px;

  .footer-box {
    display: flex;
    flex-direction: row-reverse;

    .button {
      margin-right: 20px;
    }
  }
}
.time-picker-3-week {
  margin-block: 10px;
}
</style>
